<template>
    <div>
        <h1>房型列表</h1>
        <div>
            房型名称
            <input type="text" v-model="queryInfo.housetypeName">
            <input type="button" value="查询" class="btn btn-primary" @click="show">
        </div>

        <table class="table table-bordered">
            <tbody>
                <tr>
                    <td>房型编号</td>
                    <td>房型名称</td>
                    <td>房型价格</td>
                    <td>面积</td>
                    <td>最多入住人数</td>
                    <td>图片</td>
                    <td>房型描述</td>
                    <td>是否有窗户</td>
                    <td>操作</td>
                </tr>

                <tr v-for="item in data.list" :value="item.Id">
                    <td>{{ item.Id }}</td>
                    <td>{{ item.HouseTypeName }}</td>
                    <td>{{ item.Price.toFixed(2) }}</td>
                    <td>{{ item.Area }}</td>
                    <td>{{ item.Peoples }}</td>
                    <td><img :src="item.Photo" alt="" width="100px" height="100px"></td>
                    <td>{{ item.Desc }}</td>
                    <td>{{ item.IsWin == 1 ? "有窗" : "无窗" }}</td>
                    <td>{{ moment(item.CreateTime).format("YYYY-MM-DD") }}</td>
                    <td>
                        <input type="button" value="删除" class="btn btn-danger" @click="">
                        <input type="button" value="修改" class="btn btn-primary" @click="">
                    </td>
                </tr>
            </tbody>
        </table>

        <div>
            <span>共{{ data.totalCount }}条</span>
            <span>共{{ data.totalPage }}页</span>
            <span>{{ queryInfo.pageIndex }}/{{ data.totalPage }}</span>

            <select v-model="queryInfo.pageSize" @change="show">
                <option :value="item" v-for="item in arr">每页{{ item }}条</option>
            </select>

            <input type="button" value="首页" class="btn btn-info" @click="getPage(1)">
            <input type="button" value="上一页" class="btn btn-info" @click="getPage(queryInfo.pageIndex - 1)">
            <span v-for="item in data.totalPage" @click="getPage(item)">{{ item }}</span>
            <input type="button" value="下一页" class="btn btn-info" @click="getPage(queryInfo.pageIndex + 1)">
            <input type="button" value="尾页" class="btn btn-info" @click="getPage(data.totalPage)">
            <input type="number" v-model="queryInfo.pageIndex">
            <input type="button" value="跳转到" class="btn btn-warning" @click="getPage(queryInfo.pageIndex)">
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue';
import axios from 'axios';
import moment from 'moment';
import { useRoute, useRouter } from 'vue-router';
import { useUserStore } from '@/stores/user'

const route = useRoute();
const router = useRouter();

const abc = useUserStore();

let queryInfo: any = reactive({
    pageIndex: 1,
    pageSize: 2,
    housetypeName: ''
})

let data: any = reactive({
    list: [],
    totalCount: 0,
    totalPage: 0,
})

let arr: any = ref([2, 4, 6, 8])

onMounted(() => {
    getHouse()
})

const getHouse = () => {
    axios({
        url: '/api/HouseType/GetHouseTypeList',
        method: 'get',
        params: queryInfo
    })
        .then(res => {
            console.log(res);
            Object.assign(data, res.data)
        })
        .catch(err => {
            console.log(err);

        })
}

const getPage = (num: any) => {
    if (num < 1) {
        alert('页码不能是负数')
        return
    }
    if (num > data.totalPage) {
        alert('页码超出最大范围')
        queryInfo.pageIndex = data.totalPage;
        return
    }
    queryInfo.pageIndex = num;
    getHouse()
}

const show = () => {
    queryInfo.pageIndex = 1;
    getHouse()
}
</script>

<style scoped>
span {
    margin: 0 10px;
}

input {
    margin: 0 10px;
}
</style>